<template>
  <div class="self">
    <div class="content">
      <div class="title">
        快速入口<span>电商场景常用功能，出图无等待</span>
      </div>
      <div class="items">

        <router-link to="/self/youzan">
          <div class="item">
            <div class="normal">
              <div class="left">
                <div class="title">高级抓图</div>
                <div class="btn">
                  立即使用
                  <svg t="1608444387276" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6881" width="200" height="200"><path d="M885.99797523 562.1963256L653.39810029 794.79620057a45.24739209 45.24739209 0 0 1-64.33613564 0 42.41943008 42.41943008 0 0 1 0-62.92215464l159.07286282-161.1938343-641.94737527 0a45.24739209 45.24739209 0 1 1 0-89.7877937L748.13482747 480.89241793 582.69905013 319.69858361a54.43826861 54.43826861 0 0 1 9.19087653-62.92215461 45.24739209 45.24739209 0 0 1 64.33613562 0l229.77191296 224.82297945a48.78234459 48.78234459 0 0 1-1e-8 80.59691715z" fill="#cf1322" p-id="6882"></path></svg>
                </div>
              </div>
              <div class="right">
                <svg t="1609062556639" class="icon" viewBox="0 0 1083 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4062" width="200" height="200"><path d="M467.115865 525.097194a281.971014 281.971014 0 1 0 446.811434-344.078703 281.971014 281.971014 0 1 0-446.811434 344.078703Z" fill="#E9EAEB" p-id="4063"></path><path d="M652.985507 390.307246v-222.608695H252.289855v222.608695H89.043478v296.811595h905.275363v-296.811595z" fill="#FFFFFF" p-id="4064"></path><path d="M667.826087 345.785507h-29.681159v-163.246377H267.130435v163.246377h-29.68116v-192.927536h430.376812zM460.057971 449.669565h89.043478v29.68116h-89.043478zM1009.15942 701.95942h-59.362319v-29.681159h29.68116v-267.130435h-74.202899v-29.681159h103.884058zM608.463768 523.872464h-29.681159v-148.405797h281.971014v29.681159H608.463768z" fill="#2A5082" p-id="4065"></path><path d="M920.115942 449.669565h-29.681159v-133.565217c0-25.228986-19.292754-44.521739-44.52174-44.521739h-118.724637v-29.68116h118.724637c41.553623 0 74.202899 32.649275 74.202899 74.202899v133.565217z" fill="#2A5082" p-id="4066"></path><path d="M776.162319 326.492754l-69.750725-69.750725 69.750725-71.234783 20.776811 22.26087-48.973913 48.973913 48.973913 47.489855zM178.086957 701.95942H74.202899v-326.492753h430.376811v148.405797h-29.681159v-118.724638H103.884058v267.130435h74.202899z" fill="#2A5082" p-id="4067"></path><path d="M222.608696 672.278261h163.246376v29.681159H222.608696zM920.115942 954.249275H415.536232v-400.695652h504.57971v400.695652z m-474.898551-29.681159h445.217392v-341.333333H445.217391v341.333333z" fill="#2A5082" p-id="4068"></path><path d="M771.710145 672.278261m-44.521739 0a44.521739 44.521739 0 1 0 89.043478 0 44.521739 44.521739 0 1 0-89.043478 0Z" fill="#A3D4FF" p-id="4069"></path><path d="M771.710145 731.64058c-32.649275 0-59.362319-26.713043-59.362319-59.362319s26.713043-59.362319 59.362319-59.362319 59.362319 26.713043 59.362319 59.362319-26.713043 59.362319-59.362319 59.362319z m0-89.043479c-16.324638 0-29.681159 13.356522-29.681159 29.68116s13.356522 29.681159 29.681159 29.681159 29.681159-13.356522 29.681159-29.681159-13.356522-29.681159-29.681159-29.68116z" fill="#2A5082" p-id="4070"></path><path d="M756.869565 776.162319l-51.942029 51.942029-111.304348-111.304348-163.246376 163.246377v59.362319h474.89855v-29.68116z" fill="#A3D4FF" p-id="4071"></path><path d="M920.115942 954.249275H415.536232v-80.13913l178.086956-178.086957 111.304348 111.304348 51.942029-51.942029 163.246377 146.921739v51.942029z m-474.898551-29.681159h445.217392v-8.904348l-133.565218-120.208696-31.165217 31.165218 41.553623 41.553623-20.776812 22.26087L593.623188 737.576812l-148.405797 148.405797v38.585507zM890.434783 479.350725h29.681159v29.681159h-29.681159zM356.173913 850.365217h-118.724638c-41.553623 0-74.202899-32.649275-74.202898-74.202898v-148.405797h29.681159v148.405797c0 25.228986 19.292754 44.521739 44.521739 44.521739h118.724638v29.681159z" fill="#2A5082" p-id="4072"></path><path d="M307.2 905.275362l-20.776812-22.260869 48.973913-47.489855-48.973913-48.973913 20.776812-22.26087 69.750725 71.234783zM163.246377 568.394203h29.681159v29.681159h-29.681159zM163.246377 509.031884h29.681159v29.681159h-29.681159zM163.246377 449.669565h29.681159v29.68116h-29.681159z" fill="#2A5082" p-id="4073"></path></svg>
              </div>
            </div>
            <div class="hover">
              <div class="title">高级抓图</div>
              <div class="msg">自定义DOM选择器分类抓取页面图片，支持有赞、1688平台主图和详情图抓取</div>
              <div class="btn">
                立即使用
                <svg t="1608444387276" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6881" width="200" height="200"><path d="M885.99797523 562.1963256L653.39810029 794.79620057a45.24739209 45.24739209 0 0 1-64.33613564 0 42.41943008 42.41943008 0 0 1 0-62.92215464l159.07286282-161.1938343-641.94737527 0a45.24739209 45.24739209 0 1 1 0-89.7877937L748.13482747 480.89241793 582.69905013 319.69858361a54.43826861 54.43826861 0 0 1 9.19087653-62.92215461 45.24739209 45.24739209 0 0 1 64.33613562 0l229.77191296 224.82297945a48.78234459 48.78234459 0 0 1-1e-8 80.59691715z" fill="#cf1322" p-id="6882"></path></svg>
              </div>
            </div>
          </div>
        </router-link>

        <router-link to="/self/screen">
          <div class="item">
            <div class="normal">
              <div class="left">
                <div class="title">通话截图生成</div>
                <div class="btn">
                  立即使用
                  <svg t="1608444387276" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6881" width="200" height="200"><path d="M885.99797523 562.1963256L653.39810029 794.79620057a45.24739209 45.24739209 0 0 1-64.33613564 0 42.41943008 42.41943008 0 0 1 0-62.92215464l159.07286282-161.1938343-641.94737527 0a45.24739209 45.24739209 0 1 1 0-89.7877937L748.13482747 480.89241793 582.69905013 319.69858361a54.43826861 54.43826861 0 0 1 9.19087653-62.92215461 45.24739209 45.24739209 0 0 1 64.33613562 0l229.77191296 224.82297945a48.78234459 48.78234459 0 0 1-1e-8 80.59691715z" fill="#cf1322" p-id="6882"></path></svg>
                </div>
              </div>
              <div class="right">
                <svg t="1609062616758" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4398" width="200" height="200"><path d="M819.32913 786.401009L799.959647 769.614124c9.039092-10.330391 16.786885-20.660782 24.534678-30.991173l20.660782 15.495586c-7.747793 10.330391-16.786885 21.952081-25.825977 32.282472zM864.52459 725.709962l-21.952081-12.912988c7.747793-11.62169 14.204288-24.534678 19.369483-37.447668l23.24338 10.330391c-6.456494 14.204288-12.912989 27.117276-20.660782 40.030265zM896.807062 658.562421l-24.534679-9.039092c5.165195-11.62169 9.039092-24.534678 12.912989-37.447667l24.534678 6.456494c-3.873897 12.912989-7.747793 27.117276-12.912988 40.030265zM916.176545 591.41488l-25.825978-5.165195c24.534678-121.382093-6.456494-244.055485-86.517023-338.320303l19.369482-16.786885c86.517024 100.721311 120.090794 232.433796 92.973519 360.272383zM208.544767 262.13367L187.883985 245.346784c10.330391-12.912989 21.952081-27.117276 33.57377-38.738966l18.078184 18.078185c-10.330391 11.62169-20.660782 24.534678-30.991172 37.447667zM168.514502 324.116015l-23.24338-11.62169c6.456494-14.204288 15.495586-27.117276 23.24338-40.030264l21.952081 14.204287c-7.747793 11.62169-15.495586 24.534678-21.952081 37.447667zM142.688525 386.098361l-24.534679-7.747794c3.873897-12.912989 9.039092-27.117276 14.204288-40.030264l24.534678 10.330391c-5.165195 12.912989-10.330391 25.825977-14.204287 37.447667zM187.883985 765.740227c-80.06053-102.01261-107.177806-233.725095-76.186633-360.272383l24.534678 6.456494c-29.699874 118.799496-2.582598 241.472888 71.021438 337.029004l-19.369483 16.786885z" fill="#BCC0C4" p-id="4399"></path><path d="M505.543506 517.810845m-303.455234 0a303.455233 303.455233 0 1 0 606.910467 0 303.455233 303.455233 0 1 0-606.910467 0Z" fill="#E9EAEB" p-id="4400"></path><path d="M820.620429 690.844893l-21.952081-12.912989c59.399748-100.721311 59.399748-225.977301 2.582598-326.698613l21.95208-12.912988c61.982346 108.469105 60.691047 244.055485-2.582597 352.52459zM194.340479 659.85372c-41.321564-90.390921-42.612863-194.986129-3.873896-286.668348l23.243379 10.330391c-36.156368 85.225725-34.865069 182.07314 3.873897 266.007566l-23.24338 10.330391z" fill="#BCC0C4" p-id="4401"></path><path d="M279.566204 329.281211v480.363177c0 14.204288 11.62169 25.825977 25.825978 25.825978h413.215636c14.204288 0 25.825977-11.62169 25.825978-25.825978v-593.997478c0-14.204288-11.62169-25.825977-25.825978-25.825977H419.026482c-6.456494 0-12.912989 2.582598-18.078184 7.747793l-113.634301 113.6343c-5.165195 3.873897-7.747793 10.330391-7.747793 18.078185z" fill="#A3D4FF" p-id="4402"></path><path d="M718.607818 847.092055h-413.215636c-21.952081 0-38.738966-16.786885-38.738966-38.738965V329.281211c0-10.330391 3.873897-20.660782 11.621689-27.117277l113.634301-113.6343c7.747793-7.747793 16.786885-11.62169 27.117276-11.621689h299.581336c21.952081 0 38.738966 16.786885 38.738966 38.738965v593.997478c0 20.660782-16.786885 37.447667-38.738966 37.447667z m-299.581336-645.649432c-3.873897 0-6.456494 1.291299-9.039092 3.873897L296.35309 320.242119c-2.582598 2.582598-3.873897 5.165195-3.873897 9.039092v480.363177c0 7.747793 5.165195 12.912989 12.912989 12.912989h413.215636c7.747793 0 12.912989-5.165195 12.912989-12.912989v-593.997478c0-7.747793-5.165195-12.912989-12.912989-12.912988H419.026482z" fill="#2A5082" p-id="4403"></path><path d="M628.216898 730.875158h-232.433796c-14.204288 0-25.825977-11.62169-25.825977-25.825978v-335.737705c0-14.204288 11.62169-25.825977 25.825977-25.825977h232.433796c14.204288 0 25.825977 11.62169 25.825977 25.825977v335.737705c0 14.204288-11.62169 25.825977-25.825977 25.825978z" fill="#FFFFFF" p-id="4404"></path><path d="M628.216898 743.788146h-232.433796c-21.952081 0-38.738966-16.786885-38.738966-38.738966v-335.737705c0-21.952081 16.786885-38.738966 38.738966-38.738966h232.433796c21.952081 0 38.738966 16.786885 38.738966 38.738966v335.737705c0 21.952081-16.786885 38.738966-38.738966 38.738966z m-232.433796-387.389659c-7.747793 0-12.912989 5.165195-12.912989 12.912988v335.737705c0 7.747793 5.165195 12.912989 12.912989 12.912989h232.433796c7.747793 0 12.912989-5.165195 12.912989-12.912989v-335.737705c0-7.747793-5.165195-12.912989-12.912989-12.912988h-232.433796z" fill="#2A5082" p-id="4405"></path><path d="M447.435057 343.485498h25.825977v129.129887h-25.825977zM537.825977 343.485498h25.825978v129.129887h-25.825978zM537.825977 601.745271h25.825978v129.129887h-25.825978z" fill="#2A5082" p-id="4406"></path><path d="M369.957125 459.702396h284.08575v25.825977h-284.08575zM473.261034 730.875158h-25.825977v-142.042876h206.607818v25.825978h-180.781841z" fill="#2A5082" p-id="4407"></path></svg>
              </div>
            </div>
            <div class="hover">
              <div class="title">通话截图生成</div>
              <div class="msg">一键生成通话记录截图，快速便捷，可变元素多样</div>
              <div class="btn">
                立即使用
                <svg t="1608444387276" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6881" width="200" height="200"><path d="M885.99797523 562.1963256L653.39810029 794.79620057a45.24739209 45.24739209 0 0 1-64.33613564 0 42.41943008 42.41943008 0 0 1 0-62.92215464l159.07286282-161.1938343-641.94737527 0a45.24739209 45.24739209 0 1 1 0-89.7877937L748.13482747 480.89241793 582.69905013 319.69858361a54.43826861 54.43826861 0 0 1 9.19087653-62.92215461 45.24739209 45.24739209 0 0 1 64.33613562 0l229.77191296 224.82297945a48.78234459 48.78234459 0 0 1-1e-8 80.59691715z" fill="#cf1322" p-id="6882"></path></svg>
              </div>
            </div>
          </div>
        </router-link>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Self'
}
</script>

<style lang="scss" scoped>
  $min-width: 1250px;

  .self {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: calc(100vh - 80px);
    padding-top: 20px;
    background: rgb(245,247,250);
    .content {
      width: $min-width;
      & > .title{
        margin: 20px 0;
        font-size: 20px;
        span {
          margin-left: 16px;
          font-size: 12px;
          color: #5f6368;
        }
      }
      .items {
        display: flex;
        margin: -10px;
      }
      .item {
        width: 292px;
        height: 140px;
        margin: 10px;
        background: #fff;
        box-shadow: #3b74ff33 0 1px 4px;
        cursor: pointer;
        position: relative;
        transition: all 0.3s;
        &:hover {
          transform: translate(0, -3px);
        }
        .normal, .hover {
          position: absolute;
          height: 100%;
        }
        .normal {
          width: 100%;
          display: flex;
          align-items: center;
          .left {
            height: 100%;
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .title {
              font-size: 16px;
              padding-bottom: 16px;
            }
            .btn {
              display: flex;
              align-items: center;
              font-size: 12px;
              color: #3872ff;
              padding-bottom: 10px;
              svg {
                width: 18px;
                height: 18px;
                margin-left: 4px;
                path {
                  fill: #3872ff;
                }
              }
            }
          }
          .right {
            margin: 0 auto;
            padding-left: 10px;
            svg {
              width: 90px;
            }
          }
        }
        .hover {
          width: calc(100% - 40px);
          padding: 0 20px;
          transition: all 0.3s;
          opacity: 0;
          background: #3872ff;
          box-shadow: #3b74ff33 0 12px 12px;
          position: relative;
          &:hover {
            opacity: 1;
          }
          .title {
            font-size: 16px;
            padding-top: 24px;
            padding-bottom: 8px;
            color: #fff;
          }
          .msg {
            color: #fff;
            font-size: 12px;
          }
          .btn {
            position: absolute;
            bottom: 4px;
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #ffffff;
            padding-bottom: 10px;
            svg {
              width: 18px;
              height: 18px;
              margin-left: 4px;
              path {
                fill: #ffffff;
              }
            }
          }
        }
      }
    }
  }
</style>